import React, { Suspense } from 'react'
import { useRoutes } from 'react-router-dom'

// 二级页面
const Cart = React.lazy(() => import('../views/cart'))
const Classify = React.lazy(() => import('../views/classify'))
const Home = React.lazy(() => import('../views/home'))
const My = React.lazy(() => import('../views/my'))
// 二级路由表
export const LAYOUT_ROUTER_LIST = [{
  path: '/',
  element: <Home></Home>,
  meta: {
    title: '首页'
  }
},{
  path: '/classify',
  element: <Classify></Classify>,
  meta: {
    title: '分类'
  }
},{
  path: '/cart',
  element: <Cart></Cart>,
  meta: {
    title: '购物车'
  }
},{
  path: '/my',
  element: <My></My>,
  meta: {
    title: '我的'
  }
}]

// 一级页面
const Search = React.lazy(() => import('../views/search'))
const Login = React.lazy(() => import('../views/login'))
const Layout = React.lazy(() => import('../views/layout'))
const Detail = React.lazy(() => import('../views/detail'))

// 一级路由表
const ROUTER_LIST = [{
  path: '/',
  element: <Layout></Layout>,
  meta: {
    title: '布局'
  },
  children: LAYOUT_ROUTER_LIST
}, {
  path: '/search',
  element: <Search></Search>,
  meta: {
    title: '搜索'
  }
}, {
  path: '/login',
  element: <Login></Login>,
  meta: {
    title: '用户登陆'
  }
}, {
  path: '/detail/:id',
  element: <Detail></Detail>,
  meta: {
    title: '详情'
  }
}]

const Router = () => {
  const RouterView = () => useRoutes(ROUTER_LIST);
  return (
    <Suspense fallback={<div>路由加载中...</div>}>
      <RouterView></RouterView>
    </Suspense>
  )
}

export default Router